<template>
  <div class="update-birthday">
    <!-- 这个组件vant4没有，vant4的那个太先进浏览器打不开 -->
<van-datetime-picker
  v-model="currentDate"
  title="设置生日"
  type="date"
  :min-date="minDate"
  :max-date="maxDate"
  @confirm="onConfirm"
  @cancel="$emit('close')"
/>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Toast } from 'vant'
import { updateUserProfile } from '@/api/user'
import dayjs from 'dayjs'
export default {
  name: 'UpdateBirthday',
  props: {
    birthday: {
      type: String,
      required: true
    }
  },
  setup (props, context) { // new Date()能把字符串格式转换成时间对象供currentDate使用
    const currentDate = ref(new Date(props.birthday))// 把对象格式时间渲染为默认值，并会记录选择器的时间
    async function onConfirm () {
      Toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁用背景点击
        duration: 0// 持续展示，直到下个Toast出现
      })
      try {
        const newBirthday = dayjs(currentDate.value).format('YYYY-MM-DD')// 把对象格式时间转换回字符串
        await updateUserProfile({
          birthday: newBirthday
        })
        context.emit('confirmSuccess', newBirthday)
        Toast.success('更新成功')
      } catch (err) {
        if (err.response && err.response.status === 401) {
          Toast.fail('请重新登录')
        } else {
          Toast.fail('操作失败')
        }
      }
    }
    return {
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate,
      onConfirm
    }
  }
}
</script>

<style>

</style>
